<template>
  <div>
    <el-popover
      v-model="pickerVisible"
      placement="bottom-start"
      style="margin-top:25px;"
      width="650"
      trigger="manual"
    >
      <div
        slot="reference"
        class="el-date-editor el-range-editor el-input__inner el-date-editor--datetimerange el-range-editor--mini"
        :class="pickerVisible?'is-active':''"
        style="width:350px"
        @click="handleFocus"
      >
        <i class="el-input__icon el-range__icon el-icon-time" />
        <input
          placeholder="开始日期"
          class="el-range-input"
          readonly="readonly"
          :value="setDateVal(activeLeftDay , activeLeftTime)"
          @focus="handleFocus"
        >
        <span class="el-range-separator">至</span>
        <input
          placeholder="结束日期"
          class="el-range-input"
          readonly="readonly"
          :value="setDateVal(activeRightDay,activeRightTime)"
          @focus="handleFocus"
        >
        <i class="el-input__icon el-range__close-icon" />
      </div>

      <div class="flex-cls-wrap-spc-ard">
        <dateTime
          ref="dateTimeLeft"
          type="left"
          :active-day.sync="activeLeftDay"
          :active-time.sync="activeLeftTime"
          :active-current-day="true"
          :startingweek="0"
          @getClickDay="getClickLeftDay"
        >
          <template v-slot="{ days }">
            <span v-if="days.includes('day-')" class="othermonths">{{ getDays(days) }}</span>
            <span
              v-if="!days.includes('day-')"
              class="currentmonth"
            >{{ getDays(days) }} {{ activeLeftDay.includes(days) ? '✔️' : '' }}</span>
          </template>
        </dateTime>

        <dateTime
          ref="dateTimeRight"
          type="right"
          :active-day.sync="activeRightDay"
          :active-time.sync="activeRightTime"
          :active-current-day="true"
          :startingweek="0"
          :set-disabled-fun="setDisabledFun"
          @getClickDay="getClickRightDay"
        >
          <template v-slot="{ days }">
            <span v-if="days.includes('day-')" class="othermonths">{{ getDays(days) }}</span>
            <span
              v-if="!days.includes('day-')"
              class="currentmonth"
            >{{ getDays(days) }} {{ activeRightDay.includes(days) ? '✔️' : '' }}</span>
          </template>
        </dateTime>
      </div>
      <div class="el-picker-panel__footer" style="margin-top:5px;margin:5px -12px -5px -12px;">
        <el-button size="mini" @click="cancel">取消</el-button>
        <el-button size="mini" @click="sureDate">确定</el-button>
      </div>
    </el-popover>
  </div>
</template>

<script>
import moment from "moment";
import dateTime from "./components/index";
export default {
  components: {
    dateTime
  },
  props: {
    value: {
      type: Array,
      default: () => []
    },
    // 搜索分显示格式
    format: {
      type: String,
      default: "HH:mm"
    }
  },
  data() {
    return {
      leftDateTime: "",
      rightDateTime: "",
      activeLeftDay: [""],
      activeLeftTime: "",
      activeRightDay: [""],
      activeRightTime: "",
      pickerVisible: false,
      isActive: true,
      userInput: null
    };
  },
  watch: {
    value: {
      handler(val) {
        if (Array.isArray(val) && val[0]) {
          const dateLeft = moment(val[0]).format(`YYYY-MM-DD ${this.format}`);
          const dateRight = moment(val[1]).format(`YYYY-MM-DD ${this.format}`);
          this.activeLeftDay = [dateLeft.split(" ")[0]];
          this.activeLeftTime = dateLeft.split(" ")[1];
          this.activeRightDay = [dateRight.split(" ")[0]];
          this.activeRightTime = dateRight.split(" ")[1];
        }
      },
      deep: true,
      immediate: true
    },
    activeLeftDay: {
      handler(val) {
        if (Array.isArray(val)) {
          const daysFlag = moment(val[0]).diff(
            moment(this.activeRightDay[0]),
            "days"
          );
          if (daysFlag > 0) {
            this.activeRightDay = [];
            this.$refs.dateTimeRight.panelDate = this.activeRightDay.toString();
          }
        }
      },
      deep: true,
      immediate: true
    }
  },

  methods: {
    setDateVal(day, time) {
      if (day && day[0]) {
        return day + " " + time;
      }
      return "";
    },
    sureDate() {
      if (
        this.activeLeftDay.length === 1 &&
        this.activeRightDay.length === 1 &&
        this.activeLeftTime &&
        this.activeRightTime
      ) {
        const myDateTime = [
          this.activeLeftDay[0] + " " + this.activeLeftTime,
          this.activeRightDay[0] + " " + this.activeRightTime
        ];
        this.$emit("input", myDateTime);

        this.leftDateTime = this.activeLeftDay[0] + " " + this.activeLeftTime;
        this.rightDateTime =
          this.activeRightDay[0] + " " + this.activeRightTime;
        this.pickerVisible = false;
      } else {
        this.$message("日期或时间未选择!");
      }
    },
    cancel() {
      this.pickerVisible = false;
    },
    verifyDay(day) {
      if (day.includes("downday") || day.includes("upday")) {
        return true;
      }
      return false;
    },
    setDisabledFun(day, year, month) {
      if (this.pickerVisible) {
        if (this.activeLeftDay) {
          let compareDay = !this.verifyDay(day) ? moment(day).diff(moment(this.activeLeftDay[0]), "days") : -1;
          if (this.verifyDay(day)) {
            const days = day.split("-");
            let y = year;
            let m;
            if (day.includes("downday")) {
              if (month === 11) {
                m = 1;
                y = year + 1;
              } else {
                m = month + 2;
              }
            } else {
              if (month === 0) {
                m = 12;
                y = year - 1;
              } else {
                m = month;
              }
            }

            m = m < 10 ? "0" + m : m;
            const dateVal = y + "-" + m + "-" + days[1];
            compareDay = moment(dateVal).diff(
              moment(this.activeLeftDay[0]),
              "days"
            );
            if (compareDay < 0) {
              return true;
            }
          } else {
            if (compareDay < 0) {
              return true;
            }
          }
          return false;
        }
      }
    },
    handleStartInput(event) {
      if (this.userInput) {
        this.userInput = [event.target.value, this.userInput[1]];
      } else {
        this.userInput = [event.target.value, null];
      }
    },
    handleEndInput(event) {
      if (this.userInput) {
        this.userInput = [this.userInput[0], event.target.value];
      } else {
        this.userInput = [null, event.target.value];
      }
    },
    handleFocus(event) {
      this.pickerVisible = true;
      // console.log("focus", event);
    },
    displayValue() {
      if (
        Array.isArray(this.activeLeftDay) &&
        Array.isArray(this.activeRightDay)
      ) {
        return [
          this.activeLeftDay[0] + " " + this.activeLeftTime || "",
          this.activeRightDay[0] + " " + this.activeRightTime || ""
        ];
      }
    },

    getDays(days) {
      return parseInt(days.slice(-2));
    },
    getClickLeftDay(day) {
      this.activeLeftDay = [day];
    },
    getClickRightDay(day) {
      this.activeRightDay = [day];
    }
  }
};
</script>
